<template>
  <panel :title="title">
    <div>
      <div class="middle-area">
        <x-col class="middle-area-stree" :span="10">
          <x-col :offset="2" :span="20">
            <div class="accessControl-div" v-show="state === 1">
              <img class="accessControl-img" src="../../../../../static/images/door-green.png" alt="">
              <div class="accessControl-green">{{gateState}}</div>
            </div>
            <div class="accessControl-div" v-show="state === 0">
              <img class="accessControl-img" src="../../../../../static/images/door-gray.png" alt="">
              <div class="accessControl-green" style="color:gray">{{gateState}}</div>
            </div>
            <div class="accessControl-div" v-show="state === 2">
              <img class="accessControl-img" src="../../../../../static/images/door-gray.png" alt="">
              <div class="accessControl-green" style="color:gray">{{gateState}}</div>
            </div>
          </x-col>
        </x-col>
        <x-col :span="14">
          <x-row class="text-content text-content-top">
            <x-col :offset="2" :span="item.span" v-for="item in info">
              <text-box
                title-place="left"
                :title="item.title"
                :value="item.value"
                :unit="item.unit"
                :type="item.type"
                :align="item.align"
                number-font-size="50px">
              </text-box>
            </x-col>
          </x-row>
        </x-col>
      </div>
    </div>
  </panel>
</template>

<script>
import formatDate from 'filters/format-date'
import _ from 'lodash'
import api from 'api'
export default {
  name: 'southeast',
  props: ['title', 'gateId', 'controlInfo'],

  data () {
    return {
      chartWidth: '100px',
      chartHeight: '100px',
      state: 1,
      status: '已开启'
    }
  },

  mounted () {
    setTimeout(this.initialize, 0)
    // this.$store.dispatch('updateStreeMonitor')
    this.requestRestfulData()
    console.log(this.gateId)
    this.getState()
  },
  watch: {
    gateId () {
      this.getState()
      console.log('info发生变化')
    }
  },
  computed: {
    gateState () {
      let gateState = this.state === 0 ? '关闭' : this.status === 1 ? '开启' : '离线'
      return gateState
    },
    info () {
      if (this.controlInfo && this.controlInfo.id && this.controlInfo.list) {
        let find = _.find(this.controlInfo.list, (res) => {
          return res.openDate === formatDate(new Date(), 'yyyy-MM-dd', true)
        })
        if (find) {
          return [{
            title: '今日开门次数',
            value: find.count,
            span: 24,
            align: 'left'
          }]
        }
      }
      if (!this.$store.getters.streeMonitor) {
        return [{
          title: '今日开门次数',
          value: 0,
          span: 24,
          align: 'left'
        }]
      }
      return [{
        title: '今日开门次数',
        value: 0,
        span: 24,
        align: 'left'
      }]
    }
  },
  methods: {
    initialize () {
      this.chartWidth = `${this.$el.clientWidth - 40}px`
      this.chartHeight = `${this.$el.clientHeight - 31}px`
    },
    requestRestfulData () {
    },
    getState () {
      if (!this.gateId) return
      api.control.getGateState(this.gateId).then(res => {
        this.state = res.data.state
      })
    }
  }
}
</script>

<style lang="stylus" scoped>

.stree-data-create-time
  float right

  .danger
    color red
  .door-control-rool
    width 100%
    height 100%
    position relative
    .door-control-content
      margin-left 10px
      margin-top 15px
      position absolute
      top 50%
      left 50%
      transform translate(-50%, -50%)
      width 80%
      height 70%

      .door
        display inline-block
        position relative
        width 44.9%
        height 50%
        margin-right 5%
        margin-top 1%

    .door
      .position-state-box
        position absolute
        top 50%
        left 0px
        transform translate(0, -50%)
        width 100%
        height 60px
        line-height 25px
        padding-left 60px
        box-sizing border-box

        .position-state
          color #3EC053
      .icon
        position absolute
        top 50%
        left 0px
        transform translate(0, -50%)
        width 60px
        height 60px
        background no-repeat url('../../../../assets/images/door.png') left center / 50px auto

.middle-area
  margin-top 0%
  font-size normal
  .text-content-top
    padding-top: 12%;
    padding-bottom 10%
    width initial
    font-weight 100
    margin 0 20px
    text-align left
.middle-area-stree
  margin-top 7%
  box-sizing border-box
  padding-left 2%
  .middle-area-stree-status
    margin-top 5%
    .middle-area-stree-area
      margin-bottom 10%
      font-size 18px
      font-weight 100
      color rgba(62, 193, 82, 1)
    .middle-area-stree-online
      font-size 18px
      font-weight 100
.accessControl-div{
  text-align: center;
  .accessControl-green{
    color: green
  }
  .accessControl-red{
    color: red
  }
  .accessControl-gray{
    color: gray
  }
}
.accessControl-img
  width 67%
.x-text-box__value{
  .num{
    margin-left:20px
  }
}
</style>
